<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="订单详情" :width="1200" >
    <BasicForm @register="registerForm" ref="formRef" name="XlCustomerOrdeForm">

    </BasicForm>
    <!-- 子表单区域 -->
    <a-tabs  animated >
      <a-tab-pane tab="商品列表" key="xlCustomerOrderDetail" :forceRender="true">
        <JVxeTable keep-source resizable ref="xlCustomerOrderDetail" :loading="xlCustomerOrderDetailTable.loading"
          :columns="xlCustomerOrderDetailTable.columns" :dataSource="xlCustomerOrderDetailTable.dataSource"
          :height="340" :rowNumber="true" :rowSelection="true" disabled 
          >

        </JVxeTable>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { JVxeTable  } from '/@/components/jeecg/JVxeTable';
import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
import { FormSchema } from '/@/components/Table';
import { saveOrUpdate, xlCustomerOrderDetailList, getStoreInfoByOrderId, xlCustomerOrderDetailList2 } from '../XlCustomerOrde.api';
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts'
// Emits声明
const emit = defineEmits(['register', 'success']);
const formSchema: FormSchema[] = [
  {
    label: '订单单号',
    field: 'orderCode',
    component: 'Input',
    dynamicDisabled: true,
    componentProps: {
      placeholder: '系统自动获取',
    },
  },
  {
    label: '门店',
    field: 'storeCode',
    slot: 'storeCode',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'xl_customer_store_info,store_name,store_code',
    },
    required: true,
  },
  {
    label: '收件人',
    field: 'receiptName',
    component: 'Input',
  },
  {
    label: '收件人手机号',
    field: 'receiptPhone',
    component: 'Input',
  },
  {
    label: '收件地址省市区',
    field: 'receiptZone',
    component: 'JAreaLinkage',
    componentProps: {
      saveCode: 'region',
    },
  },
  {
    label: '收件详细地址',
    field: 'receiptAddress',
    component: 'Input',
  },
  {
    label: '发货方式',
    field: 'deliveryWay',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'delivery_way',
      type: 'radioButton',
    },
    dynamicRules: ({ model, schema }) => {
      return [{ required: true, message: '请输入发货方式!' }];
    },
  },
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
];

//子表单数据
//子表表格配置
const xlCustomerOrderDetailColumns: JVxeColumn[] = [
  {
    title: '',
    key: 'id',
    type: JVxeTypes.hidden,
  },
  {
    title: '商品ID',
    key: 'productId',
    type: JVxeTypes.hidden,
  },
  {
    title: '商品图片',
    key: 'mainPic',
    type: JVxeTypes.image,
    width: '40px',
  },
  {
    title: '商品名称',
    key: 'productName',
    type: JVxeTypes.normal,
    width: '400px',
  },
  {
    title: '商品upcCode',
    key: 'upcCode',
    type: JVxeTypes.normal,
    //type: JVxeTypes.inputNumber,
    width: '180px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
  {
    title: '产品价格',
    key: 'productPrice',
    type: JVxeTypes.normal,
    width: '90px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
  {
    title: '订单数量',
    key: 'orderQuantity',
    type: JVxeTypes.inputNumber,
    width: '110px',
    placeholder: '请输入${title}',
    defaultValue: '',
    statistics: ['sum'],
    validateRules: [
      { required: true, message: '${title}不能为空' },
      {
        handler({ cellValue, row, column }, callback, target) {
          if (Number(cellValue) < 1) {
            callback(false, '${title}不能小于1');
          } else {
            callback(true); // true = 通过验证
          }
        },
        message: '${title}默认提示',
      },
    ],
  },
  {
    title: '订单金额',
    key: 'orderAmount',
    type: JVxeTypes.normal,
    width: '110px',
    placeholder: '请输入${title}',
    defaultValue: '',
    statistics: ['sum'],
  },
  {
    title: '发货状态',
    key: 'shipmentState_dictText',
    type: JVxeTypes.normal,
    //type: JVxeTypes.inputNumber,
    width: '90px',
    placeholder: '请输入${title}',
    defaultValue: '',
  },
];
const xlCustomerOrderDetailTable = reactive({
  loading: false,
  dataSource: [],
  columns: xlCustomerOrderDetailColumns
})

//方法配置


//表单配置
const [registerForm, { setProps, resetFields, setFieldsValue,getFieldsValue , validate }] = useForm({
  labelWidth: 150,
  schemas: formSchema,
  showActionButtonGroup: false,
  baseColProps: { span: 24 }
});

const dataId = ref('1')
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //表单赋值
  await setFieldsValue({
    ...data.record,
  });
  //子表赋值
  //requestSubTableData(xlCustomerOrderDetailList, { id: data?.record?.id }, xlCustomerOrderDetailTable);

 
  xlCustomerOrderDetailList2({ id: data?.record?.id }).then((result) => {
    xlCustomerOrderDetailTable.dataSource = result;
  }
  );
});




</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

</style>